<template>
	<view class="head-bg">
		<view class="bg-box">
			<image src="/static/images/my_backgroud.jpg" mode="aspectFill" class="img"></image>
		</view>
		<view class="flex pt-50 pl-30">
			<view class="back-box" @click="back()">
				<image src="/static/images/icon_back.png" mode="aspectFill" class="img"></image>
			</view>
			<view class="j-center a-center w-85">我的收藏</view>
		</view>
		<view class="pl-30 pt-50 flex">
			<view class="user-icon-big">
				<image :src="user_info.user_img" mode="aspectFill" class="img"></image>
			</view>
			<view class="pl-30 pt-30">
				<view class="flex">
					<view class="user-name">{{user_info.user_name}}</view>
					<view class="sex pl-30" v-show="is_man">
						<image src="/static/images/man.png" mode="aspectFit" class="img"></image>
					</view>
					<view class="sex pl-30" v-show="!is_man">
						<image src="/static/images/girl.png" mode="aspectFit" class="img"></image>
					</view>
				</view>
				<!-- <view class="pt-30 flex">
					<view class="shcool-text">五邑大学</view>
				</view> -->
			</view>
		</view>
		<view class="signature pl-30 pt-30">{{user_info.sign}}</view>
	</view>
	<view class="pt-30 pl-30 w-125rpx flex-a a-center">
		<view>我的收藏</view>
		<view class="selected.active mt-10"></view>
	</view>
	<uv-divider></uv-divider>
	<view class="flex">
		<view class="a-center flex-a pl-30" v-for="(item, index) in dynamicTopic" :key="index"
			@click="dynamicSeclect(index)">
			<view class="flex j-center a-center">
				<uv-icon :name="item.icon_name" color="rgb(144, 147, 153)" size="24"></uv-icon>
				<view>{{item.name}}</view>
			</view>
			<view class="selected mt-10" :class="{'active': item.is_select}" v-show="item.is_select"></view>
		</view>
	</view>
	
	<!-- 收藏区域 -->
	<view class="flex ml-30 allow-wrap pb-100" v-if="dynamicTopic[0].is_select">
		<view class="a-center flex-a mr-30  mt-30" v-for="(item, index) in dynamic_data" :key="index" @click="gotoDetails(item)">
			<view class="image-box">
				<image :src="item?.img_list[0]" mode="aspectFill" class="img"></image>
			</view>
			<view class="blod-text j-center text-overflow-2">{{item.title}}</view>
		</view>
	</view>
	<!-- <view class="flex ml-30 allow-wrap pb-100" v-if="dynamicTopic[1].is_select">
		<view class="a-center flex-a mr-30  mt-30" v-for="(item, index) in privacy_data" :key="index" @click="gotoDetails(item)">
			<view class="image-box">
				<image :src="item?.img_list[0]" mode="aspectFill" class="img"></image>
			</view>
			<view class="blod-text j-center text-overflow-2">{{item.title}}</view>
		</view>
	</view> -->
</template>

<script>
	export default {
		data() {
			return {
				dynamicTopic: [{
						name: '公开',
						is_select: true,
						icon_name:'lock-open'
					},
					// {
					// 	name: '仅个人可见',
					// 	is_select: false,
					// 	icon_name:'lock'
					// },
				],
				dynamic_data: [],
				privacy_data: [],
				user_info: {}, // 用户信息
				is_man: true, //性别
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			async dynamicSeclect(index) {
				this.dynamicTopic.forEach(item => item.is_select = false)
				this.dynamicTopic[index].is_select = true
			},
			// 查看文章详情
			gotoDetails(item) {
				const list = {
					article_id:item._id,
				}
				const data = encodeURIComponent(JSON.stringify(list))
			
				uni.navigateTo({
					url: `/pages/index/dynamic_details/dynamic_details?data=${data}`
				})
			},
		},
		async onLoad() {
			this.user_info = uni.getStorageSync('user_info')
			if (this.user_info.sex === '女') {
				this.is_man = false
			}
			const db = uniCloud.database();
			const school_collection = db.collection('schoolActivity')
			const collection = db.collection('articles')
			// 获取所有收藏的作品 
			for(let i = 0;i<this.user_info.collection_list.length;i++){
				const res = await collection.doc(this.user_info.collection_list[i]).get()
				if(!res.result.data[0]){
					const res = await school_collection.doc(this.user_info.collection_list[i]).get()
					this.dynamic_data.unshift(res.result.data[0])
					continue
				}
				this.dynamic_data.unshift(res.result.data[0])
			}
			console.log(this.dynamic_data)
			// const res = await collection.where({
			// 	user_id: this.user_info._id,
			// 	is_privacy:false
			// }).get()
			// const resp = await collection.where({
			// 	user_id: this.user_info._id,
			// 	is_privacy:true
			// }).get()
			// this.dynamic_data = res.result.data
			// this.privacy_data = resp.result.data
		}
	}
</script>

<style scoped>
	.head-bg {
		width: 100%;
		height: 400rpx;
		position: relative;
	}

	.bg-box {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
	}

	.back-box {
		width: 50rpx;
		height: 80rpx;
	}

	.pt-50 {
		padding-top: 50rpx;
	}

	.w-85 {
		width: 85%;
	}

	.user-icon-big {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100%;
		overflow: hidden;
	}

	.user-name {
		font-size: 40rpx;
		color: #fff;
		font-weight: 600;
	}

	.shcool-text {
		font-size: 32rpx;
		color: #fff;
		font-weight: 600;
	}

	.signature {
		font-size: 28rpx;
		color: #fff;
	}

	.sex {
		width: 60rpx;
		height: 60rpx;
	}

	.normal-text {
		color: #fff;
	}

	.selected {
		width: 40rpx;
		height: 8rpx;
		background-color: brown;
		border-radius: 10rpx;
		opacity: 0;
		transform: translateY(-10rpx);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.selected.active {
		opacity: 1;
		transform: translateY(0);
	}

	.image-box {
		width: 330rpx;
		height: 400rpx;
		background-color: #c4c6c9;
	}

	.allow-wrap {
		flex-wrap: wrap;
	}

	.pb-100 {
		padding-bottom: 100rpx;
	}

	.w-125rpx {
		width: 125rpx;
	}
</style>